<template>
    <div id="echarts" ref="map" style="height: 100%;width: 100%"></div>
</template>
<script type="text/javascript">
import * as echarts from 'echarts';
import chinaMap from './config/china.json';

export default {
    name: 'Echarts',
    props:{
        pageProvinceName :{
           type: String,
           default:'',
        }
    },
    data() {
        return {
            option: {
                visualMap: {
                    show: false,
                    type: 'piecewise', // 定义为分段型 visualMap
                    x: 'left',
                    y: 'bottom',
                    min: 5,
                    max: 16,
                    pieces: [
                        { gt: 3, lte: 6, color: '#D1E7FE' }, //当值为5时，区域背景
                        { gt: 9, lte: 11, color: '#3D7EFF' }, //当值为10时，区域背景
                        { gt: 14, lte: 16, color: '#3D7EFF' }, //当值为15时，区域背景
                    ],
                },
                geo: {
                    map: 'china',
                    zoom: 1,
                    selectedMode: false,
                    itemStyle: {
                        normal: {
                            show: true,
                            areaColor: '#D1E7FE', //默认色块
                            borderColor: '#8CC4FC', //边框色
                            borderWidth: 1, //设置外层边框
                        },
                        emphasis: {
                            areaColor: '#3D7EFF', //选中色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 0,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                    select: {
                        label: {
                            show: true,
                            backgroundColor: '#3D7EFF',
                        },
                        itemStyle: {
                            areaColor: '#3D7EFF',
                            color: '#3D7EFF',
                        },
                    },
                    label: {
                        show: false,
                    },
                    regions: [
                        {
                            name: '河北省',
                            itemStyle: {
                                normal: {
                                    areaColor: '#3D7EFF',
                                },
                            },
                        },
                    ],
                },
                series: [
                    {
                        name: '',
                        type: 'map',
                        coordinateSystem: 'geo', // 对应上方配置
                        geoIndex: 0,

                        label: {
                            show: true,
                        },
                        mapType: 'china',
                        hoverable: false,
                        roam: false,
                        itemStyle: {
                            normal: { label: { show: true } },
                            emphasis: { label: { show: false } },
                            zoom: 4,
                        },
                        data: [],
                    },
                ],
                animation: false,
                grid: {
                    //四周距离
                    left: '10%',

                    right: '4%',
                },
            },
            ini_data: [], //初始化省份数组
            provArr: [
                '上海',
                '河北',
                '山西',
                '内蒙古',
                '辽宁',
                '吉林',
                '黑龙江',
                '江苏',
                '浙江',
                '安徽',
                '福建',
                '江西',
                '山东',
                '河南',
                '湖北',
                '湖南',
                '广东',
                '广西',
                '海南',
                '四川',
                '贵州',
                '云南',
                '西藏',
                '陕西',
                '甘肃',
                '青海',
                '宁夏',
                '新疆',
                '北京',
                '天津',
                '重庆',
                '香港',
                '澳门',
                '台湾',
            ], //获取的省份，有可能是从后台获取
            //正则省份，将省与市的字眼去掉，框架不识别
            mycharts: {},
        };
    },
    //改监听，
    watch: {
        $route: {
            handler: function (val, oldVal) {
                const that = this;
                // if(val.query.province){
                that.select_province(val.query.province);
                // }
            },
            // 深度观察监听
            deep: true,
        },
        'option.series': {
            handler(n, o) {
                // console.log(11, n, o);
            },
            deep: true,
            immediate: true,
        },
        pageProvinceName:{
            handler(n,o){
                this.select_province(n);
            },
            deep:true,
            // immediate: true,
        }
    },
    methods: {
        echartsInit() {
            var that = this;
            echarts.registerMap('china', { geoJSON: chinaMap });
            // 找到容器
            let mycharts = echarts.init(document.getElementById('echarts'));
            // 设置地图尺寸大小
            mycharts.resize({
                width: 440,
                height: 440,
            });

            // 开始渲染
            for (var i = 0; i < this.provArr.length; i++) {
                var str = this.provArr[i];
                var re = /省|市/g; //全局匹配
                var str2 = { name: str.replace(re, ''), value: 5 }; //拼接对象数组
                this.ini_data.push(str2);
            }
            this.option.series[0].data = this.ini_data; //将拼接好的数组赋给参数集合
            mycharts.setOption(this.option);
            // 初始化颜色
            var ini_len = that.option.series[0].data.length;
            for (var i = 0; i < ini_len; i++) {
                //初始化颜色
                that.option.series[0].data[i].value = 5;
                mycharts.setOption(that.option);
            }
            //点击事件
            mycharts.on('click', function (params) {
                //点击事件
                that.select_province(params.name);
            });
            this.mycharts = mycharts;
        },

        // //初始化省颜色
        // ini_province() {
        //     var that = this
        //     let mycharts = document.getElementById("echarts");
        //     var ini_len = that.option.series[0].data.length;
        //     for (var i = 0; i < ini_len; i++) {
        //         //初始化颜色
        //         that.option.series[0].data[i].value = 5;
        //         mycharts.setOption(that.option);
        //     }
        // },
        //选中省颜色
        select_province(province_name) {
            let mycharts = document.getElementById('echarts');
            // let mycharts = this.$refs.map

            var len = this.option.series[0].data.length;
            for (var i = 0; i < len; i++) {
                if (this.option.series[0].data[i].name == province_name) {
                    //如果匹配正确
                    //先归零
                    this.ini_province();
                    //改变颜色
                    this.option.series[0].data[i].value = 10;
                    mycharts.setOption(this.option);
                }
            }
            this.option.geo.regions[0].name = province_name;
            // this.option.geo.select.label.show = false
            this.mycharts.setOption(this.option);

            // this.echartsInit()
        },
    },
    mounted() {
        this.echartsInit();
        // this.ini_province();
    },
};
</script>
<style scoped >
* {
    margin: 0;
    padding: 0;
    /* color: #333333; */
}
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
.clear {
    clear: both;
}
body {
    font-family: '微软雅黑';
}
a {
    text-decoration: none;
    color: red;
}
#echarts {
    width: 480px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;

    margin-top: -42px;
    margin-left: -30px;
    pointer-events: none;
    /* border: 1px solid red; */
}
</style>
